<template>
	<el-affix position="top" class="affix">
		<!-- 聊天框 -->
		<div class="box">
			<!-- 顶部 -->
			<div class="flex justify-between p-20px top">
				<div class="font-bold text-20px text-black title">
					欧神官方客服
				</div>
				<div class="svg_">
					<svg-icon icon-class="language" size="1.2rem" color="#000"></svg-icon>
					<svg-icon icon-class="close" size="1.2rem" @click="clickClose"></svg-icon>
				</div>
			</div>
			<!-- 聊天 -->
			<div class="chat">
				<el-scrollbar max-height="580px" ref="messageList">
					<div class="message-list" ref="innerRef">
						<template v-for="(item, index) in dataList" :key="index">
							<div v-if="item.type === 'right'" class="right">
								<div>
									{{ item.content }}
								</div>
								<div>
									{{ item.time }}
								</div>
							</div>
							<div v-else class="left">
								<div>
									<div class="img">
										<img src="/src/assets/icons/ougod.svg">
									</div>
									<p>{{ item.name }}</p>
								</div>
								<div>
									<div>{{ item.content }}</div>
									<div>{{ item.time }}</div>
								</div>
							</div>
						</template>
					</div>
				</el-scrollbar>
			</div>
			<!-- 输入框 -->
			<div class="p-20px">
				<el-input style="width: 368px;height: 56px;margin-right: 10px;" placeholder="在此输入信息" class="input_" />
				<el-button :color="btnColor" type="primary" style="height: 22px;padding:20px;border-radius: 14px;"
					@click="sendInput">
					<svg-icon icon-class="send" size="1.4rem"></svg-icon>
				</el-button>
			</div>
		</div>
	</el-affix>
</template>
<script lang="ts" setup>
import styles from '@/styles/variables.module.scss';
import { ElScrollbar } from 'element-plus';
// 按钮颜色
const btnColor = computed(() => {
	return styles.btnThemeColor;
})
const emit = defineEmits(['close'])

// 聊天记录
const dataList = ref([
	{
		type: 'left',
		content: '你好，我是欧神官方客服，有什么问题可以问我哦',
		name: '欧神官方客服',
		time: '9月8日，上午10:00'
	},
	{
		type: 'right',
		content: '如何购买数字资产（C2C 买币）？',
		name: '用户',
		time: '9月8日，上午10:00'
	},
	{
		type: 'left',
		content: '抱歉没有查到您的问题，您可以换一种方式提 问，或者在上方问题目录中搜索相关问题。',
		name: '欧神官方客服',
		time: '9月8日，上午10:00'
	},
	{
		type: 'left',
		content: '抱歉没有查到您的问题，您可以换一种方式提 问，或者在上方问题目录中搜索相关问题。',
		name: '欧神官方客服',
		time: '9月8日，上午10:00'
	},
	{
		type: 'left',
		content: '抱歉没有查到您的问题，您可以换一种方式提 问，或者在上方问题目录中搜索相关问题。',
		name: '欧神官方客服',
		time: '9月8日，上午10:00'
	}
])

const messageList = ref<InstanceType<typeof ElScrollbar>>();

const innerRef = ref<HTMLDivElement>();
const scrollToBottom = () => {
	messageList.value!.setScrollTop(innerRef.value!.clientHeight);
}

const clickClose = () => {
	// 关闭返回一个false
	emit('close', false)
}

const sendInput = () => {
	dataList.value.push({
		type: 'right',
		content: '你好，我是欧神官方客服，有什么问题可以问我哦',
		name: '欧神官方客服',
		time: '9月8日，上午10:00'
	})
}

// 显示时滑动到最低部
onUpdated(() => {
	nextTick(() => {
		scrollToBottom();
	})
})
// 监听数据变化，滚动到底部
watch(dataList,()=>{
	nextTick(()=>{
		scrollToBottom();
	})
},{deep:true})

onMounted(() => {
	
})
</script>
<style scoped lang="scss">
.el-affix {
	position: fixed;
	top: 12vh !important;
	right: 8vw !important;

	/* 固定在右侧 */
	z-index: 200 !important;

	/* 设置层级，确保不会被其他元素遮挡 */
}

.box {
	width: 484px;
	// height: 757px;
	background: #FFF;
	border: 1px solid #E5E6EB;
	border-radius: 14px;
	box-shadow: 0 3px 14px 1px rgb(0 0 0 / 16%);

	.top {
		border-bottom: 1px solid #E5E6EB;

		.title {
			font-family: "Microsoft YaHei", "Microsoft YaHei";
		}

		.svg_ {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100%;

			svg {
				margin-left: 20px;
				cursor: pointer;
			}
		}
	}

	.chat {
		box-sizing: border-box;
		height: 600px;
		padding: 10px 20px;

		.message-list {
			>div {
				margin-top: 5px;
			}

			.right {
				display: flex;
				flex-direction: column;
				align-items: end;
				justify-content: flex-end;

				>div:nth-child(1) {
					padding: 20px;
					font-family: "Microsoft YaHei", "Microsoft YaHei";
					font-size: 16px;
					font-weight: 400;
					color: #FFF;
					background: #000;
					border-radius: 10px;
				}

				>div:nth-child(2) {
					margin-top: 4px;
					font-family: "Microsoft YaHei", "Microsoft YaHei";
					font-size: 14px;
					font-weight: 400;
					color: #7D8592;
				}
			}

			.left {
				>div:nth-child(1) {
					display: flex;
					align-items: center;

					.img {
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 40px;
						height: 40px;
						padding: 4px;
						margin-right: 8px;
						background: #114CEE;
						border-radius: 50%;

						>img {
							width: 24px;
							height: 24px;
						}
					}

					>p {
						font-family: "Microsoft YaHei", "Microsoft YaHei";
						font-size: 16px;
						font-weight: 400;
						color: #000;
					}
				}

				>div:nth-child(2) {
					margin-left: 50px;

					>div:nth-child(1) {
						padding: 20px;
						font-family: "Microsoft YaHei", "Microsoft YaHei";
						font-size: 16px;
						font-weight: 400;
						color: #000;
						background: #F6F6F6;
						border-radius: 10px;
					}

					>div:nth-child(2) {
						margin-top: 4px;
						font-family: "Microsoft YaHei", "Microsoft YaHei";
						font-size: 14px;
						font-weight: 400;
						color: #7D8592;
					}
				}
			}
		}
	}
}
</style>
